<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <input type="text" v-model="keyword" placeholder="请输入姓名">  
        <button @click="sortType=2">升序排序</button>
        <button @click="sortType=1">降序排序</button>
        <button @click="sortType=0">原序排序</button>
        <ul>
            <li v-for="(item,index) in filterPersons" :key="item.id">{{item.name}}--{{item.age}}</li>
        </ul>
    </div>
</body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '列表排序',
                keyword:'',
                sortType:0,
                persons:[
                    {id:1,name:'张三',age:18},
                    {id:2,name:'李四',age:52},
                    {id:3,name:'王五',age:32},
                    {id:4,name:'刘五',age:43},
                    {id:5,name:'哈四',age:76},
                    {id:6,name:'鱼三',age:34}
                ]
            },
            computed:{
                filterPersons(){
                    const arr= this.persons.filter((pre)=>{
                        return pre.name.indexOf(this.keyword)!==-1;
                    });

                    //对筛选后的数据进行排序
                    if(this.sortType){
                        //非0 需要排序，
                        arr.sort((a,b)=>{
                            return this.sortType==1? b.age-a.age:a.age-b.age;
                        });
                    }
                    return arr;
                }
            }
        })
    </script>
</html>